import {defineStore} from "pinia"
import {SkinConfig} from "@/libs/config";

export const useSkinStore = defineStore('skin', {
    state: () => ({
        pageTheme: SkinConfig.pageTheme,
        primaryColor: SkinConfig.primaryColor,
        menuTheme: SkinConfig.menuTheme,
        breakpointSize: SkinConfig.breakpointSize,
        layoutTheme: SkinConfig.layoutTheme,
        sideWidth: SkinConfig.sideWidth,
        minSideWidth: SkinConfig.minSideWidth,
        collapsed: SkinConfig.collapsed,
        headerTheme: SkinConfig.headerTheme,
        headerHeight: SkinConfig.headerHeight,
        collapsedWidth: SkinConfig.collapsedWidth,
        enableNavTab: SkinConfig.enableNavTab,
        navTabType: SkinConfig.navTabType,
    }),

    getters: {
        // 使用侧边栏菜单 渲染 LOGO
        useSideLogo: (state) => state.layoutTheme === 'side',
        // 使用顶部菜单 渲染 LOGO
        useHeaderLogo: (state) => state.layoutTheme !== 'side',

        getLeftWidth: (state) => {
            if (state.layoutTheme === 'column') {
                return `${state.sideWidth + state.minSideWidth}px`;
            }
            return `${state.sideWidth}px`
        },

        logoWidth: (state) => {
            if (state.layoutTheme === 'column') return `${state.sideWidth + state.minSideWidth}px`
            return `${state.sideWidth}px`
        },

        getTopDistance: (state) => {
            if (state.layoutTheme === 'side' || state.layoutTheme === 'column') {
                return 0;
            }

            return '62px';

        },

        getMenuTheme: (state) => {
            if (state.layoutTheme === 'column') {
                return 'light';
            }
            return state.menuTheme;

        }

    },


    actions: {
        // 改变皮肤
        changTheme() {
            document.body.setAttribute('arco-theme', this.pageTheme)
        },
        // 改变颜色
        changeColor() {
            document.body.setAttribute("arco-color", this.primaryColor)
        }


    },

    persist: {
        key: '_ADMIN_SKIN',
        storage: sessionStorage
    }

})


